<template>
  <div class="video-player">
    
    <div v-show="VideoList.length>0" class="video-ctx">
        <video ref="myVideo"  muted="muted" :autoplay="true" :src="url"  @error="PlayError" class="video" @ended="PlayEnded">
        </video>
    </div>
     
    <no-data v-show="VideoList.length==0" />
  </div>
</template>

<script>
import {GetWeightVideo} from '@/api/screenApi';

import NoData from '@/components/NoData'
import 'video.js/dist/video-js.css'

export default {
    name:"videoplayer",
    props:{
        stationId:{type:[String,Number]},
        areaCode:{type:String, default: ''}
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    components: {
        NoData
    },
    data() {
        return{
            VideoList:[],
            number:0,
            url:"",
        }
    },
    mounted() {
        this.init()
    },
    watch: {
        'stationId'(){
            this.init()
        },
        'areaCode'(){
            this.init()
        }
    },
    methods: {
        //获取视频
        async init(){
            try {
                let params = {
                    areaCode:this.areaCode,
                    stationId:this.stationId
                }
                this.VideoList = await GetWeightVideo(params)
                this.url = this.VideoList.length?this.VideoList[0].videoUrl:""
            }catch(err){
                
                // eslint-disable-next-line no-console
                console.log(err)
            }
            
        },
        //播放结束
        PlayEnded(){
            if(this.number==this.VideoList.length-1){
                this.init()
            }else{
                this.number ++
                this.url = this.VideoList.length?this.VideoList[this.number].videoUrl:""

            }
        },
        //播放错误
        PlayError(){
            if(this.number==this.VideoList.length-1){
                this.init()
            }else{
                this.number ++
                this.url = this.VideoList.length?this.VideoList[this.number].videoUrl:""
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.video-player{
    width: 100%;
    height: 100%;
    .video-ctx{
        width: 100%;
        height: 100%;
        .video{
            width: 100%;
            height: 100%;
        }
    }
    
}
</style>